<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Landing Page</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .showcase {
            position: absolute;
            right: 0;
            width: 100%;
            min-height: 100vh;
            padding: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #111;
            color: #fff;
            z-index: 2;
        }

        .showcase header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 40px 100px;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            text-transform: uppercase;
            cursor: pointer;
        }

        .showcase video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #6684bb;
            mix-blend-mode: overlay;
        }

        .text {
            position: relative;
            z-index: 10;
        }

        .text h2 {
            font-size: 5em;
            font-weight: 800;
            line-height: 1em;
            text-transform: uppercase;
        }

        .text h3 {
            font-size: 4em;
            font-weight: 700;
            line-height: 1em;
            text-transform: uppercase;
        }

        .text p {
            font-size: 1.1em;
            margin: 20px 0;
            font-weight: 400;
            max-width: 700px;
        }

        .contract {
            position: absolute;
            bottom: 20px;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .contract li {
            list-style: none;
        }

        .contract li a {
            color: white;
            display: inline-block;
            margin-right: 20px;
            transition: 0.5s;
        }

        .contract li a:hover {
            transform: translateY(-10px) translateX(5px);
        }

        @media screen and(max-width: 768px) {
            .text h2 {
                font-size: 3em;
                font-weight: 800;
                line-height: 1em;
                text-transform: uppercase;
            }

            .text h3 {
                font-size: 4em;
                font-weight: 700;
                line-height: 1em;
                text-transform: uppercase;
            }
        }
    </style>
</head>

<body>
    <section class="showcase">
        <header>
            <h2 class="logo">Keep Moving</h2>
        </header>
        <video src="https://assets.mixkit.co/videos/preview/mixkit-beautiful-sea-and-beach-near-the-city-9963-large.mp4"
            muted loop autoplay></video>

        <div class="overlay"></div>

        <div class="text">
            <h2>Never Stop</h2>
            <h3>Exploring The World</h3>
            <p>Hey,I'm Chen Caize.
                I'm a full stack WEB developer from China.

            </p>
        </div>

        <ul class="contract">
            <li>
                <a href="https://github.com/chencaize" target="_blank">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="2em" height="2em"
                        fill="currentColor" aria-hidden="true">
                        <path
                            d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z">
                        </path>
                    </svg>
                </a>
            </li>
            <li>
                <a href="https://chinese.freecodecamp.org/chencaize" target="_blank">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="freecodeCamp" width="2em" height="2em"
                        fill="currentColor" aria-hidden="true">
                        <path
                            d="M1022.592 525.525333c0 106.666667-36.437333 201.301333-110.848 285.056-27.093333 31.104-48.768 45.909333-63.488 45.909334a20.608 20.608 0 0 1-14.762667-5.333334 22.058667 22.058667 0 0 1-6.4-14.933333c0-8.021333 9.6-20.266667 28.757334-37.930667 77.397333-74.069333 116.352-166.186667 116.352-275.456 0-121.429333-40.234667-219.818667-120.149334-295.936-15.957333-14.592-24.32-26.752-24.32-36.352 0-5.12 2.602667-10.922667 6.997334-14.72a23.338667 23.338667 0 0 1 14.762666-6.357333c17.834667 0 44.757333 21.717333 78.592 65.152C992 315.818667 1024 413.610667 1024 526.72l-1.408-1.194667zM0 498.432c0-106.624 36.437333-201.344 110.848-285.056 27.093333-31.104 48.768-45.909333 63.573333-45.909333 5.077333 0 10.837333 1.408 14.677334 5.333333 3.84 4.053333 6.4 8.064 6.4 13.397333 0 8.021333-9.6 20.352-28.757334 39.168-75.989333 74.410667-115.669333 166.186667-115.669333 275.712 0 121.472 40.576 220.074667 120.362667 295.893334 16.213333 14.677333 24.277333 27.008 24.277333 36.437333a20.778667 20.778667 0 0 1-6.826667 14.848 22.613333 22.613333 0 0 1-15.018666 6.826667c-18.602667 0-44.074667-21.76-77.994667-64.768C31.317333 710.570667 0 613.248 0 498.432z m755.157333 293.077333H286.506667a28.672 28.672 0 0 1-28.501334-28.416 27.733333 27.733333 0 0 1 28.501334-28.501333h468.650666c14.848 0 28.501333 12.16 28.501334 28.501333a27.861333 27.861333 0 0 1-28.501334 28.416z m-256-380.544c8.405333-1.066667 14.677333 26.24 15.402667 31.957334 1.962667 15.061333-3.029333 29.568-9.856 42.794666-25.472 49.706667-84.394667 89.770667-68.778667 152.533334 7.082667 27.093333 21.077333 45.909333 64.597334 69.077333-14.72 5.077333-35.157333-4.736-46.677334-12.842667-51.157333-34.816-83.754667-91.989333-80.554666-154.410666 1.28-19.797333 5.12-39.253333 10.197333-58.368 16-54.656 48.597333-102.442667 67.754667-155.605334 9.6-25.557333 16.64-56.490667 9.002666-83.328a100.821333 100.821333 0 0 0-19.84-36.224c-2.602667-3.242667-17.237333-19.84-22.997333-17.92 25.6-9.6 48.597333-0.682667 70.912 12.757334 17.237333 10.24 30.72 24.96 40.917333 41.6 19.157333 30.677333 26.837333 65.792 30.677334 101.589333 1.322667 14.72-0.64 50.517333 16.64 57.6 17.877333 7.637333 31.957333-22.4 35.797333-34.56 8.32-27.52-2.56-53.717333-13.397333-79.274667 2.602667 5.162667 12.16 10.88 16.597333 14.762667l15.36 14.677333c18.56 19.157333 30.037333 42.837333 37.717333 68.437334 6.997333 22.997333 10.24 46.634667 11.52 69.674666 3.157333 47.914667-7.68 97.194667-26.837333 141.269334a197.973333 197.973333 0 0 1-33.237333 54.314666c-13.610667 15.914667-31.914667 26.154667-46.634667 40.832 34.474667-34.517333 52.821333-90.752 47.914667-133.589333a120.96 120.96 0 0 0-28.117334-67.072s1.92 15.274667 3.712 24.874667c3.2 21.12-10.88 43.52-27.477333 40.917333-12.16-1.237333-5.802667-27.434667-4.48-35.754667 4.48-24.917333-1.28-49.237333-10.410667-72.234666-8.917333-21.717333-25.6-38.997333-51.114666-35.114667l-4.309334-3.370667z">
                        </path>
                    </svg>
                </a>
            </li>
            <li>
                <a href="https://leetcode.com/chencaize/" target="_blank">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="leetcode" width="2em" height="2em"
                        fill="currentColor" aria-hidden="true">
                        <path
                            d="M686.969238 765.086476l-115.039501 111.200586c-19.877051 19.919706-47.389279 28.237356-77.759367 28.237357s-57.882315-8.31765-77.802021-28.237357l-184.779799-186.102093c-19.919706-19.919706-29.943541-49.052809-29.943541-79.465551s10.023835-57.882315 29.943541-77.80202l184.225289-186.827222c19.919706-19.919706 47.986444-27.512228 78.356531-27.512228s57.882315 8.31765 77.759367 28.237357l115.039501 111.157931c21.924473 21.967128 58.223552 21.199345 81.043772-1.620876 22.82022-22.862875 23.588003-59.161953 1.66353-81.086426l-111.285895-112.43757a215.619088 215.619088 0 0 0-104.290538-57.029222l105.228939-106.764506c22.009782-21.924473 21.241999-58.266206-1.578221-81.086426-22.82022-22.82022-59.161953-23.545348-81.129081-1.620876l-430.811629 430.854284c-41.844179 41.886834-63.725997 99.683839-63.725997 163.580455 0 63.896616 21.881818 123.485115 63.725997 165.28664l185.419619 186.016783c41.844179 41.75887 99.683839 61.934504 163.537801 61.934504s121.693622-21.839164 163.580455-63.725997l111.285895-112.480225c21.924473-21.924473 21.15669-58.223552-1.66353-81.043772s-59.119299-23.588003-81.001117-1.66353z m200.86059-209.860714H455.098741c-29.943541 0-54.171363 25.763389-54.171363 57.413114s24.227822 57.413114 54.171363 57.413114h432.731087c29.900886 0 54.171363-25.763389 54.171363-57.413114s-24.270477-57.413114-54.171363-57.413114z">
                        </path>
                    </svg>
                </a>
             </li>
             <li>
                <a href="https://segmentfault.com/u/chencaize" target="_blank">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="segmentfault" width="2em" height="2em"
                        fill="currentColor" aria-hidden="true">
                        <path
                            d="M952 474H569.9c-10-2-20.5-4-31.6-6-15.9-2.9-22.2-4.1-30.8-5.8-51.3-10-82.2-20-106.8-34.2-35.1-20.5-52.2-48.3-52.2-85.1 0-37 15.2-67.7 44-89 28.4-21 68.8-32.1 116.8-32.1 54.8 0 97.1 14.4 125.8 42.8 14.6 14.4 25.3 32.1 31.8 52.6 1.3 4.1 2.8 10 4.3 17.8.9 4.8 5.2 8.2 9.9 8.2h72.8c5.6 0 10.1-4.6 10.1-10.1v-1c-.7-6.8-1.3-12.1-2-16-7.3-43.5-28-81.7-59.7-110.3-44.4-40.5-109.7-61.8-188.7-61.8-72.3 0-137.4 18.1-183.3 50.9-25.6 18.4-45.4 41.2-58.6 67.7-13.5 27.1-20.3 58.4-20.3 92.9 0 29.5 5.7 54.5 17.3 76.5 8.3 15.7 19.6 29.5 34.1 42H72c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h433.2c2.1.4 3.9.8 5.9 1.2 30.9 6.2 49.5 10.4 66.6 15.2 23 6.5 40.6 13.3 55.2 21.5 35.8 20.2 53.3 49.2 53.3 89 0 35.3-15.5 66.8-43.6 88.8-30.5 23.9-75.6 36.4-130.5 36.4-43.7 0-80.7-8.5-110.2-25-29.1-16.3-49.1-39.8-59.7-69.5-.8-2.2-1.7-5.2-2.7-9-1.2-4.4-5.3-7.5-9.7-7.5h-79.7c-5.6 0-10.1 4.6-10.1 10.1v1c.2 2.3.4 4.2.6 5.7 6.5 48.8 30.3 88.8 70.7 118.8 47.1 34.8 113.4 53.2 191.8 53.2 84.2 0 154.8-19.8 204.2-57.3 25-18.9 44.2-42.2 57.1-69 13-27.1 19.7-57.9 19.7-91.5 0-31.8-5.8-58.4-17.8-81.4-5.8-11.2-13.1-21.5-21.8-30.8H952c4.4 0 8-3.6 8-8v-60a8 8 0 00-8-7.9z">
                        </path>
                    </svg>
                </a>
            </li>
             <li>
                <a href="https://www.npmjs.com/~chencaize" target="_blank">
                    <svg viewBox="64 64 896 896" focusable="false" data-icon="segmentfault" width="2em" height="2em"
                        fill="currentColor" aria-hidden="true">
                        <path
                            d="M117.149737 906.850263V117.160081h789.690182v789.690182z m148.521374-641.706667v492.533657h248.873374V367.843556h145.025293v389.906101h98.735321V265.143596z">
                        </path>
                    </svg>
                </a>
            </li>
        </ul>
    </section>
</body>

</html>
